<template>
	<view class="content">
		<!-- 滚动视图，用于展示历史记录 -->
		<scroll-view class="question" scroll-y="true">
			<view class="a" v-if="history.length > 0">
				<!-- 循环展示历史记录，调整布局逻辑 -->
				<view class="item" :key="item.id" :class="{user: item.role == 'user', assistant: item.role!= 'user'}"
					v-for="(item, index) in history">
					<view v-if="item.role == 'user'" class="user-container">
						<!-- 用户提问内容和图标显示在右侧，使用flex布局控制顺序 -->
						<text class="text">{{item.content}}</text>
						<uni-icons :type="item.role == 'user'? 'contact' : 'chat-filled'" size="30"
							:color="item.role == 'user'? '#999' : '#0f0'" />
					</view>
					<view v-if="item.role!= 'user'" class="assistant-container">
						<!-- 模型回答内容和图标显示在左侧，同样用flex布局控制顺序 -->
						<uni-icons :type="item.role == 'user'? 'contact' : 'chat-filled'" size="30"
							:color="item.role == 'user'? '#999' : '#0f0'" />
						<text class="text">{{item.content}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 输入框和提问按钮 -->
		<view class="word">
			<!-- 输入框，用于输入问题 -->
			<uni-easyinput v-model="word" placeholder="" />
			<!-- 提问按钮，点击后调用doQuestion函数 -->
			<view class="btn" @tap="doQuestion">提问</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../untils/config'
	// 定义输入框的值
	const word = ref('')
	// sk-GBcKQawde9PNAXoam7oe3iIFbf3c4D9Y6nypRP0d13VDKqt2
	let history = ref([])
	//提问的模型
	let model = {
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	}

	async function doQuestion() {
		if (word.value == "") {
			uni.showToast({
				title: '请输入问题',
				icon: 'none'
			})
		} else {
			history.value.push({
				"role": "user",
				"content": word.value
			})
			model.messages = history.value
			console.log(model)
			let res = await uni.$post(CONFIG.kimi_url + "/v1/chat/completions", model)
			console.log(res)
			history.value.push(res.choices[0].message)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 97px);
		border: 1px solid green;
		position: relative;

		.question {
			border: 1px solid blue;
			height: calc(100vh - 143px);
		}

		.item {
			display: flex;
			flex-direction: row-reverse;
			margin: 15px;
			justify-content: end;

			.text {
				border: 1px solid gray;
				border-radius: 5px;
				padding: 5px;
				font-size: 14px;
			}

			.user-container,
			.assistant-container {
				display: flex;
				align-items: center;
				// // 根据需要可适当调整容器内元素的间距等样式
				// gap: 5px;
			}
		}

		.reverse {
			flex-direction: row-reverse;
		}

		.word {
			height: 44px;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 96%;
			border: 1px solid red;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 6px;

			.btn {
				height: 35px;
				border: 1px solid black;
				border-radius: 5px;
				width: 50px;
				text-align: center;
				line-height: 34px;
				margin-left: 5px;
				cursor: pointer;
			}
		}
	}
</style>